<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleUpdateProduct()"
        size="mini">
        添加
      </el-button>
      <el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="input"
        clearable
        size="mini">
      </el-input>
      <el-button
        class="btn-add"
        @click="quzzyQuery()"
        size="mini">
        查询
      </el-button>
    </el-card>

    <el-table ref="productTable"
              style="width: 100%"
              :data="productList"
              border>
      <el-table-column type="selection" width="60" align="center"></el-table-column>
      <el-table-column label="足迹编号" width="100" prop="footprintId" align="center">
      </el-table-column>
      <el-table-column label="商品编号" width="100" prop="spuId" align="center">
      </el-table-column>
      <!-- <el-table-column label="设置" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="getAttrList(scope.$index, scope.row)">属性列表
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="spuBigimg"
        label="商品图片" width="150" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.spuBigimg" width="100" height="50px">
        </template>
      </el-table-column>
      <el-table-column label="名称" width="100" prop="spuName" align="center">
      </el-table-column>
      <el-table-column label="价格" width="100" prop="spuMoney" align="center">
      </el-table-column>
      <el-table-column label="用户编号" width="100" prop="userId" align="center">
      </el-table-column>

      <el-table-column label="收藏时间" width="100" :formatter="dateFormatter" prop="footprintTime" align="center">
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <p>
            <el-button
              size="mini"
              @click="handleUpdateProduct(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.page.currentPage"
      layout="total, prev, pager, next, jumper"
      :total="this.page.total">
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="33%">
      <el-form ref="productAttrCatForm" :model="this.Form" :rules="rules" label-width="120px">

        <el-form-item label="足迹编号" prop="footprintId" v-show="false">
          <el-input v-model="Form.homeBillboardsId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="userId" v-show="false">
          <el-input v-model="Form.userId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="spuId">
          <el-input v-model="Form.spuId" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(Form)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import moment from 'moment'
    import axios from "axios"

    export default {
        name: "kindsList",
        data() {
            return {
                input:"",
                productList: [],
                kindStatus: false,
                dialogTitle: "",
                dialogVisible: false,
                userId: "1",
                mo:false,
                Form: {
                    footprintId: "",
                    spuId: "",
                    userId: "",
                },
                page: {
                    currentPage:1,
                    total: 0,
                    page: 0,
                    rows: 10,
                },
                rules: {
                    spuId: [
                        {required: true, message: '请输入商品id', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            let listdata = this.$route.params.item;
            if (listdata != null) {
                this.userId = listdata;
            }
            console.log(listdata)
            this.getList();
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.rows = size;
                console.log(this.page.rows)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.page.currentPage = currentPage;
                this.page.page=(currentPage*this.page.rows)-this.page.rows
                if(this.mo==true){
                    this.quzzyQuery()
                }else{
                    this.getList();
                }
                console.log(this.page.currentPage)  //点击第几页
            },
            quzzyQuery() {
                this.mo=true
                axios.get("http://localhost:8001/foot/footQuzzy", {
                    params: {
                        value: this.input,
                        id: this.userId,
                        page: this.page.page,
                        rows: this.page.rows
                    }
                }).then(data => {
                    console.log(data)
                    if (data.data.list == null || data.data.list == "") {
                        this.$message({
                            message: '未查询到有关数据'
                        });
                        this.mo=false;
                        this.getList();
                    } else {
                        this.productList = data.data.list;
                        this.page.total = data.data.total;
                    }
                });
            },
            handleConfirm(kindsForm) {
                //表单校验
                this.$refs["productAttrCatForm"].validate((tt=>{
                    console.log(tt)
                    if (!tt) return;
                    this.Form.userId = this.userId

                    if (this.dialogTitle == "添加") {
                        console.log(kindsForm)
                        this.$axios({
                            method: 'post',
                            url: 'http://localhost:8001/foot/mySave',
                            data: kindsForm,
                        }).then(result => {
                            console.log(result)
                            if (result.data) {
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '填写错误或已存在',
                                    type: 'error'
                                });
                            }
                            this.Form = {};
                            this.dialogVisible = false;
                            this.getList();
                        })
                    } else if (this.dialogTitle == "编辑") {
                        console.log(kindsForm)
                        this.$axios({
                            method: 'put',
                            url: 'http://localhost:8001/foot/myUpdate',
                            data: kindsForm,
                        }).then(result => {
                            if (result.data) {
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '填写错误或已存在',
                                    type: 'error'
                                });
                            }
                            ;
                            this.Form = {};
                            this.dialogVisible = false;
                            this.getList();
                        })
                    }

                }))

            },
            dateFormatter(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return ''
                }
                ;
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            },
            getAttrList(index, row) {
                this.$router.push({path: '/attr/spuAttrList', query: {kindsId: row.kindsId}})
            },
            getList() {
                axios.get("http://localhost:8001/foot/footAll", {
                    params: {
                        id: this.userId,
                        page: this.page.page,
                        rows: this.page.rows
                    }
                }).then(result => {
                    console.log(result)
                    this.productList = result.data.list;
                    this.page.total = result.data.total;
                })
            },
            /*删除*/
            handleDelete(index, row) {
                // var kindStatus=row.homeStatus==1?1:0;
                var bean = {
                    id: row.collectId,
                    spuId: row.spuId,
                    userId: row.userId, collectStatus: 0
                }
                // console.log(kindStatus)
                this.$axios({
                    method: 'delete',
                    url: 'http://localhost:8001/foot/mydelete',
                    data: bean
                }).then(result => {
                    this.getList();
                })
            },
            /*编辑*/
            handleUpdateProduct(index, row) {
                this.dialogVisible = true;
                if (row == undefined || row == '') {
                    this.dialogTitle = "添加";
                    this.Form = {};
                    // this.kindsForm.kindsId='';
                } else {
                    this.dialogTitle = "编辑";
                    this.Form.spuId = row.spuId;
                    this.Form.userId = row.userId;
                }
            },
            /*查看单条*/
            handleShowProduct(index, row) {
                console.log("handleShowKinds", row);
            },

        }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
